<template>
  <div class="v2-table wh-full">
    <div :class="btnPosClass" class="pd-tb-10-px">
      <el-button
          v-for="(btn) in nvl(tableConfig.btns,[])"
          :type="nvl(btn.btnType,'primary')"
           @click="btnHeaderClick(btn)"
            size="small">{{btn.title}}</el-button>
    </div>
    <el-table :data="tableData" border
              :default-expand-all="tree"
              size="small"
              :row-key="rowKey"
              :tree-props="nvl(tableConfig.treeProps,treeProps)"
              class="wh-full">
      <el-table-column
          v-for="(col ) in nvl(tableColumn,[])"
          v-if="nvl(col.tableShow,true)"
          :prop="col.key"
          :align="nvl(col.align,'center')"
          :label="col.title"
          show-overflow-tooltip
          :width="nvl(col.width, {})">
      </el-table-column>
      <template v-if="hasAction">
        <el-table-column
            :prop="actionColumn.key"
            :align="nvl(actionColumn.align,'center')"
            :label="actionColumn.title"
            :width="nvl(actionColumn.width, {})">
          <template v-slot:default="{row,$index}" >
            <el-button type="text" size="small" v-for="(btn) in nvl(actionColumn.btns,[])" @click="handlerRowClick(row,btn,$index)">{{btn.title}}</el-button>
          </template>
        </el-table-column>

      </template>
    </el-table>
    <el-pagination
        class="mar-tb-10px"
        :align="nvl(tableConfig.pageAlign,'right')"
        background
        layout="prev, pager, next"
        :current-page="nvl(pageNumber,1)"
        :total="nvl(total,0)">
    </el-pagination>
    <dialog-form
        :form-data="currentFormData"
        :width="width"
        :page-size="10"
        :inline="inline"
        :columns="tableColumn"
        @submit="formSubmit"
        v-model="dialogStatus"></dialog-form>
  </div>
</template>

<script>
import http from "network/http";
import ApiResponse from "utils/ApiResponse";
import commons from "utils/commons";

export default {
  name: "V2Table",
  props:{
    width: "" ,
    inline: false ,
    tree: false ,
    rowKey: "" ,
    tableConfig:{
      treeProps:{} ,
      tableColumns: [],
      tableData:[] ,
      response: {} ,
      url: "" ,
      lazyLoad: false ,
      method: "post",
      params: null,
      btnAlign: 'right',
      btns: []
    }
  },
  data(){
    return {
      treeProps: {children: 'children', hasChildren: 'hasChildren'} ,
      tableData: this.tableConfig.tableData ,
      tableColumn:[] ,
      total: 0 ,
      pageNumber: 1 ,
      currentFormData:{} ,
      dialogStatus: false ,
      hasAction: false ,
      actionColumn: {} ,
      currentBtn: {} ,
      currentIndex: 0
    }
  },
  mounted() {

    this.initTable()
  },
  computed:{
    btnPosClass(){
      return [`text-${this.tableConfig.btnAlign}`]
    }
  },
  methods:{
    formSubmit(formData){
      if(this.currentBtn.callback){
        this.$emit(this.currentBtn.callback, {
          formData: formData ,
          row: this.tableData[this.currentIndex] ,
          index: this.currentIndex})
      }

    },
    btnHeaderClick(item){
      if(item.type === "NEW"){
        this.currentBtn = item
        this.currentFormData = {} ;
        this.currentIndex = 0 ;
        this.dialogStatus = true ;
      }else if(!this.isVoid(item.callback)){
        this.$emit(item.callback)
      }
    },
    handlerRowClick(row ,btn,index){
      if(btn.type === "EDIT" || btn.type === "NEW"){
        this.currentFormData = btn.type === "EDIT" ? row : {};
        this.dialogStatus = true ;
        this.currentBtn = btn ;
        this.currentIndex = index
      }else if(!this.isVoid(btn.callback)){
        this.$emit(btn.callback , {row,index})
      }

    },
    initTable(){
      this.handlerTableColumn()
      if(!this.isVoid(this.tableConfig.url) && !this.tableConfig.lazyLoad){
        let params = this.handlerParams();
        params = Object.assign(params , {current: this.pageNumber , size: 10})
        this.required({
          url: this.tableConfig.url ,
          method: this.nvl(this.tableConfig.method,"post"),
          data: params
        })
      }
    },
    handlerParams(){
      let params = this.tableConfig.params ;
      if(commons.isFun(params)){
        return params();
      }else if(commons.isVoid(params)){
        return {}
      }
      return params ;
    },
    handlerTableColumn(){
      this.tableColumn = this.tableConfig.tableColumns.filter(this.tableHide) ;
      let actionColumns = this.tableConfig.tableColumns.filter(item=>item.key === 'action') ;
      if(actionColumns.length >0){
        this.hasAction = true ;
        this.actionColumn = actionColumns[0]
      }
    },
    tableHide(item){
      return item.key !== 'action'
    },
    required(opts){
      http(opts).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          this.tableData = data.records
          this.total = data.total
        })
      })
    },
    handlerResponse(data){

    },
    refresh(){
      let params = this.handlerParams();
      params = Object.assign(params , {current: this.pageNumber , size: 10})
      this.required({
        url: this.tableConfig.url ,
        method: this.nvl(this.tableConfig.method,"post"),
        data: params
      })
    },
    nvl(a,b){
      return this.isVoid(a) ? b : a ;
    },
    isVoid(a){
        return [undefined,null,""].includes(a)
    }
  }
}
</script>

<style scoped>

</style>
